<template>
  <div>
    <ul class="recommend" v-if="recommendListInfo.length>0">
      <li v-for="item in recommendListInfo" :key="item.id" @click="$router.push('/detail/'+item.id)">
        <img v-lazy="item.imageHost+item.mainImage" alt="">
        <p>{{item.name}}</p>
        <span class="price"><i>￥</i>{{item.price}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    recommendListInfo: {
      type: Array,
      default: function () {
        return []
      },
      require: true
    }
  },
}
</script>
<style scoped lang="scss">
.recommend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  li {
    width: 49.5%;
    padding: 10px;
    box-sizing: border-box;
    height: 235px;
    background-color: #fff;
    font-size: 13px;
    margin-bottom: 2px;
    img {
      height: 100%;
      height: 150px;
      object-fit: cover;
    }
    p {
      width: 100%;
      color: #333;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      margin-top: 3px;
    }
    .price {
      color: #f63515;
      font-size: 16px;
      display: inline-block;
      margin-top: 5px;
      i {
        font-style: normal;
      }
    }
  }
}
</style>
